<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>代办事项列表</title>
    <div class="container" id="app"></div>
    <style>
        .container {
            max-width: 500px;
            margin: 2rem auto;
            padding: 0 1rem;
            font-family: sans-serif;
        }
        h1 {
            text-align: center;
            color: #333;
            margin-bottom: 1.5rem;
        }
        /* 添加待办区域 */
        .add-bar {
            display: flex;
            gap: 0.5rem;
            margin-bottom: 1rem;
        }
        .todo-input {
            flex: 1;
            padding: 0.6rem;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .btn {
            padding: 0.6rem 1rem;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            color: white;
        }
        .btn-add {
            background-color: #42b983;
        }
        .btn-del-batch {
            background-color: #f56c6c;
            margin-bottom: 1rem;
            /* 静态页面默认显示批量删除按钮 */
            display: block;
        }
        .btn-edit {
            background-color: #409eff;
            margin-right: 0.3rem;
            padding: 0.3rem 0.6rem;
            font-size: 0.8rem;
        }
        /* 待办列表 */
        .todo-list {
            list-style: none;
            padding: 0;
        }
        .todo-item {
            display: flex;
            align-items: center;
            gap: 0.8rem;
            padding: 0.8rem;
            margin-bottom: 0.5rem;
            border: 1px solid #eee;
        }
        .todo-check {
            width: 16px;
            height: 16px;
        }
        .todo-content {
            flex: 1;
            cursor: pointer;
        }
        .done {
            text-decoration: line-through;
            color: #999;
        }
        /* 状态标签 */
        .status-tag {
            padding: 0.2rem 0.5rem;
            border-radius: 12px;
            font-size: 0.7rem;
            color: white;
        }
        .status-done {
            background-color: #42b983;
        }
        .status-pending {
            background-color: #fbbf24;
        }
        /* 提示与统计 */
        .tip {
            color: #f56c6c;
            font-size: 0.8rem;
            margin: 0.3rem 0;
        }
        .stats {
            margin-top: 1rem;
            color: #666;
            font-size: 0.9rem;
        }
        /* 编辑框样式（静态页面默认隐藏） */
        .edit-input {
            flex: 1;
            padding: 0.4rem;
            border: 1px solid #409eff;
            border-radius: 4px;
            display: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Vue待办列表</h1>

        <!-- 添加待办区域 -->
        <div class="add-bar">
            <input 
                type="text" 
                class="todo-input" 
                placeholder="输入待办内容"
            >
            <button class="btn btn-add">添加</button>
        </div>
        <div class="tip">请输入待办内容！</div>

        <!-- 批量删除按钮 -->
        <button class="btn btn-del-batch">
            批量删除（已选：2）
        </button>

        <!-- 待办列表 -->
        <ul class="todo-list">
            <li class="todo-item">
                <!-- 批量选择复选框 -->
                <input type="checkbox" class="todo-check" checked>
                
                <!-- 待办文本（未完成状态） -->
                <span class="todo-content">
                    学习v-model
                </span>
                
                <!-- 未完成状态标签 -->
                <span class="status-tag status-pending">
                    <b>未完成</b>
                </span>
                
                <!-- 编辑按钮 -->
                <button class="btn btn-edit">
                    编辑
                </button>
            </li>
            <li class="todo-item">
                <!-- 批量选择复选框 -->
                <input type="checkbox" class="todo-check" checked>
                
                <!-- 待办文本（已完成状态） -->
                <span class="todo-content done">
                    练习v-for
                </span>
                
                <!-- 已完成状态标签 -->
                <span class="status-tag status-done">
                    <b>已完成</b>
                </span>
                
                <!-- 编辑按钮 -->
                <button class="btn btn-edit">
                    编辑
                </button>
            </li>
            <li class="todo-item">
                <!-- 批量选择复选框 -->
                <input type="checkbox" class="todo-check">
                
                <!-- 待办文本（未完成状态） -->
                <span class="todo-content">
                    掌握v-bind
                </span>
                
                <!-- 未完成状态标签 -->
                <span class="status-tag status-pending">
                    <b>未完成</b>
                </span>
                
                <!-- 编辑按钮 -->
                <button class="btn btn-edit">
                    编辑
                </button>
            </li>
        </ul>

        <!-- 统计信息 -->
        <div class="stats">
            总数量：3 | 已完成：1 | 未完成：2
        </div>
    </div>
    <script>
    new Vue({
        el: '#app',
        data() {
            return {
                // 后续步骤将在此添加响应式数据
                newTodoText: '', // 新增待办输入内容
                addTip: '', // 提示文本
                selectedIds: [], // 批量选中的待办ID
                // 初始待办数据（替换静态列表）
                todos: [
                    { id: 1, text: '学习v-model', isDone: false, isEditing: false, editText: '' },
                    { id: 2, text: '练习v-for', isDone: true, isEditing: false, editText: '' },
                    { id: 3, text: '掌握v-bind', isDone: false, isEditing: false, editText: '' }
                ]
            };
        },
        computed: {
            // 后续步骤添加统计相关计算属性
        },
        methods: {
            // 后续步骤添加交互方法
        }
    });
</script>

</body>
</html>
